import { useState, useEffect } from 'react';
import { DatePicker, Form, Modal } from 'antd';
import dayjs from 'dayjs';
import { stageStartTime } from '@/utils/data';
import MyModal from '@/components/modal';
import SchedulePlanLeft from './schedulePlanLeft';

import s from './index.module.css';

export default function PlanModal({ open, onClose, onSubmit, loading, copyFn, plan, detailData, submitData, handlePlan, copyDetailFn }) {
  const dateFormat = 'YYYY-MM-DD';
  const [form] = Form.useForm();
  const [submitDataM, setSubmitDataM] = useState<any>({});
  const [planOk, setPlanOK] = useState<any>([]);

  // 通过form改变修改排期
  const onChange = (changedValues) => {
    const key = Object.keys(changedValues)[0];
    const value = changedValues[key] ? dayjs(changedValues[key]).format(dateFormat) : undefined;
    const newKey = key ? `${key}Vice` : key;
    const newSubmitData = { ...submitDataM, timeNodes: { ...submitDataM.timeNodes, [newKey]: value } };
    const { newPlan } = handlePlan(newSubmitData);
    setSubmitDataM(newSubmitData);
    setPlanOK(newPlan);
  };

  useEffect(() => {
    setPlanOK(plan);
    setSubmitDataM(submitData);
    const timeNodes = {};
    const key = Object.keys(submitData.timeNodes || {});
    key.forEach((item: string) => {
      const k = `${item}Vice`;
      if (submitData.timeNodes[k]) {
        timeNodes[item] = dayjs(submitData.timeNodes[k], dateFormat);
      } else {
        timeNodes[item] = submitData.timeNodes[item] ? dayjs(submitData.timeNodes[item], dateFormat) : undefined;
      }
    });
    form.setFieldsValue(timeNodes);
  }, []);

  return (
    <MyModal
      open={open}
      title="确认节点并预览排期"
      okText="提交"
      onCancel={onClose}
      onOk={() => {
        onSubmit(submitDataM);
      }}
      destroyOnClose
      maskClosable={false}
      confirmLoading={loading}
      width={800}
    >
      <div className={s.planModal}>
        <SchedulePlanLeft copyDetailFn={copyDetailFn} copyFn={copyFn} data={planOk} detailData={detailData} height={485} />
        <div className={s.planModalRight}>
          <div className={s.planModalRightTitle}>确认节点</div>
          <Form form={form} labelCol={{ span: 10 }} wrapperCol={{ span: 14 }} initialValues={{ isDelete: true }} onValuesChange={onChange}>
            <Form.Item label="需求评审日期" name="reviewTime">
              <DatePicker format={dateFormat} />
            </Form.Item>
            <Form.Item label="开发进入日期 " name="entryTime">
              <DatePicker format={dateFormat} />
            </Form.Item>
            <Form.Item label="进入联调日期" name="jointTime">
              <DatePicker format={dateFormat} />
            </Form.Item>
            <Form.Item label="冒烟提供日期" name="smokeTime">
              <DatePicker format={dateFormat} />
            </Form.Item>
            <Form.Item label="整体提测日期" name="subTestTime">
              <DatePicker format={dateFormat} />
            </Form.Item>
            <Form.Item label="介入测试日期" name="TestTime">
              <DatePicker format={dateFormat} />
            </Form.Item>
            <Form.Item label="预计验收日期" name="acceptTime">
              <DatePicker format={dateFormat} />
            </Form.Item>
            <Form.Item label="预计上线日期" name="onlineTime">
              <DatePicker format={dateFormat} />
            </Form.Item>
          </Form>
        </div>
      </div>
    </MyModal>
  );
}
